<template>
	<div class='search-list'>
		<div class='headers'>
			<Header></Header>
			<ul>
				<li v-for='(item, index) in searchList.data' :key='index' @click='changeTab(index)'>
					<div :class='searchList.currentIndex == index ? "active" : ""'>{{ item.name }}</div>
					<div class='search-filter' v-if='index != 0'>
						<!-- <i 
							class='iconfont icon-arrow_up_fat'
							:class=' item.status == 1 ? "active" : ""'
						></i> -->
						<van-icon name="arrow-up" size="16" :class='item.status == 1 ? "active" : ""' />
						<!-- <i 
							class='iconfont icon-arrow_down_fat'
							:class=' item.status == 2 ? "active" : ""'
						></i> -->
						<van-icon name="arrow-down" size="16" :class='item.status == 2 ? "active" : ""' />
					</div>
				</li>
			</ul>
		</div>
		<section ref="wrapper">
			<div v-if='goodsList.length'>
				<ul>
					<li v-for='(item, index) in goodsList' :key='index' @click="goDetail(item.id)">
						<img v-lazy="item.imgUrl" alt="" :key="item.imgUrl">
						<h3>{{ item.name }}</h3>
						<div class='price'>
							<div>
								<span>¥</span>
								<b>{{ item.price }}</b>
							</div>
							<div>立即购买</div>
						</div>
					</li>
					<li></li>

				</ul>


				<div class="listkong"></div>

			</div>
			<div v-else>
				<van-empty image="search" description="搜索不到相关商品" />
			</div>

		</section>


		<Tabbar></Tabbar>
	</div>
</template>

<script>
import Header from '@/components/search/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue';
import http from '@/common/api/request.js'
import BetterScroll from 'better-scroll'
export default {
	data() {
		return {
			goodsList: [],
			searchList: {
				currentIndex: 0,
				data: [
					/*
					status:0 都不亮
					status:1 上箭头亮
					status:2 下箭头亮
					*/
					{ name: '综合', key: 'zh' },
					{ name: '价格', status: 0, key: 'price' },
					{ name: '销量', status: 0, key: 'num' }
				]
			},
			BScroll: ''
		}
	},
	created() {
		this.getData();
	},

	computed: {
		orderBy() {
			//知道当前是哪一个对象
			let obj = this.searchList.data[this.searchList.currentIndex];
			//针对于状态，判断是升序还是降序
			let val = obj.status == '1' ? 'asc' : 'desc';
			return {
				[obj.key]: val
			}
		}
	},
	components: {
		Header,
		Tabbar
	},
	methods: {
		getData() {
			http.$axios({
				url: '/api/goods/shopList',
				params: {
					searchName: this.$route.query.key,
					...this.orderBy
				}
			}).then(res => {
				this.goodsList = res;
			})
			this.$nextTick(() => {
				this.BScroll = new BetterScroll(this.$refs.wrapper, {
					movable: false,
					probeType: 3,
					zoom: true,
					click: true,
					bounce: true,
					pullDownRefresh: {
						threshold: 5
					}
				})

				// 触发下拉刷新的事件， 调用getData 请求数据
				this.BScroll.on('pullingDown', () => {
					this.getData(() => {
						this.$nextTick(() => {
							this.BScroll.finishPullDown();
							this.BScroll.refresh();
						})
					})

				})
			})
			console.log(this.goodsList)
		},
		changeTab(index) {
			this.searchList.currentIndex = index;
			//点击的下标对应数据的哪一个
			let item = this.searchList.data[index];
			//取消所有的状态值===》都变成0
			this.searchList.data.forEach((v, i) => {
				if (i != index) {
					v.status = 0;
				}
			})
			//当前点击的改变状态
			if (index == this.searchList.currentIndex) {
				item.status = item.status == 1 ? 2 : 1;
			}
			//发送请求进行数据排序
			this.getData();

		},
		goDetail(id) {
			this.$router.push({
				path: '/detail',
				query: {
					id
				}
			})
		},

	},
	watch: {
		$route() {
			this.getData();
		}
	}
}
</script>
<style scoped>
	.search-list {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.headers ul {
		display: flex;
		justify-content: space-around;
		padding: 0.533333rem 0;
		font-size: 0.426666rem;
	}
	
	.headers ul li {
		display: flex;
		align-items: center;
		color: #ccc;
	}
	
	.headers ul li>div {
		padding: 0 0.08rem;
	}
	
	.headers ul li .search-filter {
		display: flex;
		flex-direction: column;
	}
	
	section {
		flex: 1;
		overflow: hidden;
	}
	
	section ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	
	}
	
	section ul li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 50%;
		padding: 0.266666rem;
	}
	
	section ul li img {
		width: 4.533333rem;
		height: 4.533333rem;
	}
	
	section ul li img[lazy=loading] {
		background-color: #f7f7f7;
	}
	
	section ul li h3 {
		width: 100%;
		font-size: 0.373333rem;
		color: #222;
		font-weight: 400;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	section ul li .price {
		display: flex;
		justify-content: space-between;
		padding: 0.266666rem 0;
		width: 100%;
		font-size: 14px;
		text-align: center;
		margin: 0 auto;
		height: 25px;
	}
	
	section ul li .price div:first-child span {
		font-size: 0.32rem;
		color: #1b1b1b;
		line-height: 25px;
	}
	
	section ul li .price div:first-child b {
		color: #1b1b1b;
		font-size: 0.426666rem;
		line-height: 25px;
	}
	
	section ul li .price div:last-child {
		padding: 0.08rem 0.16rem;
		color: #fff;
		background-color: #1b1b1b;
		border-radius: 0.16rem;
	}
	
	.active {
		color: #1b1b1b;
	}
	
	.listkong {
		width: 100%;
		height: 1.6rem;
	
	}
	</style>